<template>
	<view class="section c-position_relative">
		<view class="title-box c-position_absolute c-flex_column c-align_center">
			<view class="en-title">
				{{enTitle}}
			</view>
			<view class="cn-title">
				{{cnTitle}}
			</view>
		</view>
		<view class="content-box c-flex_row c-flex_warp">
			<view class="item" v-for="(item, index) in operateList" :key="index">
				<detail-operate-item :icon='item.icon' :title='item.name' :flag='item.value' :progress="item.progress"
					@tapItem='tapItem'></detail-operate-item>
			</view>
		</view>
	</view>
</template>

<script>
	import detailOperateItem from "./detail-operate-item.vue";
	export default {
		components: {
			detailOperateItem
		},
		props: {
			enTitle: {
				type: String,
				default: ""
			},
			cnTitle: {
				type: String,
				default: ""
			},
			operateList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		methods: {
			tapItem(e) {
				this.$emit("tapItem", e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.section {
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0 0 20rpx #88888844;
		padding: 50rpx;

		.title-box {
			left: 50%;
			top: 0;
			transform: translate(-50%, -50%);

			padding: 15rpx 35rpx;

			background: #ffda17;
			border-radius: 15rpx;

			color: #333;
			font-size: 30rpx;

			.en-title {
				font-weight: 700;
				margin-bottom: 8rpx;
			}

			.cn-title {
				font-size: 24rpx;
			}
		}

		.content-box {
			.item {
				width: 50%;
			}
		}
	}
</style>